<template>
  <a-modal
    v-model:visible="visible"
    width="50%"
    title="请填写拒绝打款的原因"
    draggable
    :body-style="{ height: '500px', overflow: 'hidden', overflowY: 'scroll' }"
    @before-ok="onOk"
  >
    <a-row justify="center">
      <a-col :span="16">
        <div class="card_wrap" v-if="detailInfo.inviteCode">
          <div class="mt-30 pay_wrap">
            <a-form direction="vertical" :model="form" size="small" class="form my-10">
              <a-form-item field="remark" hide-label>
                <a-textarea
                  v-model="form.remark"
                  placeholder="请填写拒绝原因/描述"
                  allow-clear
                />
              </a-form-item>
            </a-form>
          </div>
        </div>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script setup>
import { Message } from '@arco-design/web-vue'
import { financeHandlreFusePay } from '@/apis'

defineOptions({ name: 'financeRefuse' })

const emit = defineEmits(['getTableData'])

const visible = ref(false)
const detailInfo = ref({
  inviteCode: '',
  mobile: '', //手机号码
  withdrawalAmount: '',
  receiveAmount: '',
  withdrawalTime: '',
  receiveTime: '',
  withdrawalNo: '',
  alipayTradeId: '',
  withdrawalAccountInfo: {
    withdrawalMethod: '',
    withdrawalName: '',
    withdrawalAccount: ''
  },
  payAccountInfo: [],
  status: '',
  statusName: '',
  id: ''
})
const form = reactive({
  remark: '' // 拒绝原因 备注
})

const openModal = (item) => {
  visible.value = true
  detailInfo.value = item
}

// 拒绝打款
const onOk = async () => {
  const res = await financeHandlreFusePay({
    remark: form.remark,
    userBalanceWithdrawalId: detailInfo.value.id
  })
  Message.success(res.message)
  form.remark = ''
  emit('getTableData')
  return true
}

defineExpose({ openModal })
</script>
<style lang="scss" scoped>
.card_wrap {
}
</style>
